import { moneyFormat } from "@/utils/utils";
import TabPane from "@ant-design/pro-card/lib/components/TabPane";
import ProForm, { DrawerForm, ModalForm, ProFormDatePicker, ProFormDateRangePicker, ProFormDigit, ProFormGroup, ProFormRadio, ProFormSelect, ProFormText, ProFormTextArea } from "@ant-design/pro-form"
import { PageContainer } from "@ant-design/pro-layout"
import ProTable, { EditableProTable, ProColumns } from "@ant-design/pro-table"
import { Button, Table, Tabs, Image, Descriptions, Timeline, Upload } from "antd";
import { useRef, useState } from "react";
import process from '@/assets/imgs/process.png';
import { UploadOutlined } from "@ant-design/icons";
import OrderInfo from "@/components/Common/OrderInfo";

export default () => {
  const [activeKey,setActiveKey] = useState("tab1");
  const [showDetail,setShowDetail] = useState(false);
  const [showTransfor,setShowTransfor] = useState(false);
  const [fileList,setFileList] =useState<any>([]);
  const [proData,setProData]  =useState<any>([{id:'1',pIndex:1},{id:'2',pIndex:2}]);
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>([1,2]);
  const [tabKey,setTabKey] = useState("1");
  const [showFollow,setShowFollow] = useState(false);
  const orderRef = useRef<any>()

  const [dataList,setDataList] =useState<any>([
    {
      n1:'多孔机器人',
      n2:'CP.2012312',
      numbs:'2',
      price:500000,
      price2:1000000,
    },
    {
      n1:'单孔机器人',
      n2:'CP.2012313',
      numbs:'1',
      price:400000,
      price2:400000,
    },
    {
      n1:'多孔机器人',
      n2:'CP.2012312',
      numbs:'2',
      price:500000,
      price2:1000000,
    },
    {
      n1:'单孔机器人',
      n2:'CP.2012313',
      numbs:'1',
      price:400000,
      price2:400000,
    }
  ]);

  const columns_2:ProColumns[] = [
    {
      title: '产品名称',
      editable: false,
      dataIndex: 'n1',
    },
    {
      title: '产品型号',
      dataIndex: 'n2',
      editable: false,
    },
    {
      width: 100,
      ellipsis:true,
      title: '单位',
      dataIndex: 'packing_unit',
      hideInSearch: true,
      editable: false,
      renderText:()=>'个'
    }, {
      width: 150,
      title: '数量',
      dataIndex: 'numbs',
      valueType:'digit',
    },
    {
      width: 150,
      title: '单价',
      valueType:'digit',
      dataIndex: 'price',
    },
    {
      width: 150,
      title: '金额',
      editable: false,
      valueType:'digit',
      dataIndex: 'price2',
    },
    {
      title: "操作",
      valueType: 'option',
      width:150,
      render: (text, record:any,_, action) => [
     
      ]
    }
  ]

  const columns:ProColumns[] = [
    {
      title:'订单号',
      dataIndex: 'name11',
      ellipsis:true,
      width:150,
      renderText:()=>'SO.202301020312001'
    },
    {
        title:'客户编码',
        dataIndex: 'code',
        ellipsis:true,
        width:100,
        renderText:()=>'CODE0001'
      },
    {
      title:'客户名称',
      dataIndex: 'name',
      ellipsis:true,
      width:100,
      renderText:()=>'人民医院'
    },
    {
        title:'订单类型',
        dataIndex: 'name9',
        width:100,
        renderText:()=>'普通订单'
      },
    {
      title:'联系人',
      dataIndex: 'name1',
      width:100,
      renderText:()=>'杨院长'
    },
    {
      title:'订单状态',
      dataIndex: 'name9',
      valueType:'select',
      width:100,
      valueEnum:{
        '1':'待审核',
        '2':'待发货',
        '3':'审核未通过',
      },
      renderText:()=>'待发货'
    },
    
    {
      title:'关联合同',
      dataIndex: 'date4',
      width:150,
      renderText:()=>'OPP.20221201002'
    },
    {
      title:'实付金额',
      dataIndex: 'date41',
      width:150,
      valueType:'money',
      hideInSearch:true,
      renderText:()=>'500000'
    },
    {
      title:'订单日期',
      dataIndex: 'name2',
      width:100,
      hideInSearch:true,
      renderText:()=>'2023-01-20'
    },
    {
        title:'备注',
        dataIndex: 'remark',
        width:150,
        hideInSearch:true,
        renderText:()=>''
      },
    {
      title: "操作",
      valueType: 'option',
      fixed:'right',
      width:100,
      render: (text, record:any,_, action) => [
        <a key="b2" onClick={()=>{
            console.log('000000')
            orderRef.current.init({},false)
        }}>详情</a>,
        <a key="b3" onClick={()=>{}}>关闭</a>
      ]
    }
  ]


  return (
    <PageContainer>
           <ProTable
      headerTitle=''
      toolBarRender={() => [
        <Button
          type="primary"
          key="primary"
          onClick={() => {
            setShowDetail(true)
          }} >新建</Button>]
        }
      pagination={{
        pageSizeOptions:['20', '100', '500']
      }}
     dataSource={dataList}
        scroll={{x:1300}}
      columns={columns}
      rowKey="id"
      search={{span:6}}
      toolbar={{
        settings: [],
      }}
      />

    <OrderInfo  admin={true} ref={orderRef} onRefersh={()=>{
      }}></OrderInfo>

       <DrawerForm title='新增' width={1200} visible={showDetail}  labelCol={{style:{width:160}}} labelAlign="left" layout="horizontal"  onVisibleChange={v=>{setShowDetail(v)}}  drawerProps={{
          destroyOnClose:true,
          forceRender:true
        }}>
          <div style={{textAlign:'right'}}>
            <Button type='primary' style={{marginRight:25}}  key='add' onClick={() => { }} >选择合同</Button>
          </div>
        <ProFormGroup>
          <ProFormText name="name3" width={'md'}  label="客户名称" />
          <ProFormText name="name9" width={'md'} label="客户联系人" initialValue={''}/>
          <ProFormText name="name9" width={'md'} label="联系人电话" initialValue={''}/>
          <ProFormText name="name10" width={'md'} label="关联合同" />
        </ProFormGroup>

        <div style={{height:20}}></div>
              <EditableProTable headerTitle='产品列表' style={{marginLeft:-20}}  toolBarRender={()=>[<Button
                      type='primary'
                      key='new'
                      onClick={() => {
                      }}
                      >新增产品
                      </Button>]}
                    toolbar={{settings:[]}} rowKey='pIndex' columns={columns_2} value={proData} recordCreatorProps={false} onChange={data => {
            setEditableRowKeys(data.map((item: any) => item.pIndex));
            setProData(data);
          }} editable={{
            type: 'multiple',
            editableKeys,
            onValuesChange: (record, recordList) => {
              setProData(recordList);
            },
            actionRender: (row, config, defaultDoms) => {
              return [defaultDoms.delete];
            },
            onChange: setEditableRowKeys
        }} summary={()=>{
          return (
            <>
              <Table.Summary.Row>
                <Table.Summary.Cell index={1} colSpan={3}>总计:</Table.Summary.Cell>
                <Table.Summary.Cell index={1} align='center'>
                  3
                </Table.Summary.Cell>
                <Table.Summary.Cell index={1}>
                </Table.Summary.Cell>
                <Table.Summary.Cell index={1} align='center'>
                ￥{moneyFormat(10000)}
                </Table.Summary.Cell>
                <Table.Summary.Cell index={1} colSpan={1}>
                </Table.Summary.Cell>
              </Table.Summary.Row>             
            </>
          );
        }}></EditableProTable>

        </DrawerForm>
    </PageContainer>)
}